import _ from "lodash";
import {useState} from "react";
import {useBoolean} from "ahooks";
import {Form, Modal, Table} from "antd";
import {useList} from "@/hooks";
import {adFinApplyingUser} from "@/api";
import {InputFormItem} from "@/components/common";
import User from "@/components/User";
import {
    columnsApplyStatus,
    columnsCreateTime,
    columnsHeaderImg,
    columnsMobile,
    getColumnsId,
    getColumnsName,
} from "@/components/Columns";

export default function AdJoin() {
    const [form] = Form.useForm();
    const [open, {setFalse}] = useBoolean(false);
    const [mobile, setMobile] = useState("");
    const [nickName, setNickName] = useState("");

    const {data} = useList(
        {
            api: adFinApplyingUser,
            params: {mobile, nickName},
        },
        [mobile, nickName]
    );
    const columnsId = getColumnsId(data);
    const columns = [
        columnsId,
        getColumnsName(),
        columnsMobile,
        columnsHeaderImg,
        columnsApplyStatus,
        {
            title: "申请备注(微信号)",
            dataIndex: "applyRemark",
            key: "applyRemark",
            width: 190,
        },
        {...columnsCreateTime, title: "申请时间"},
    ];
    return (
        <div className="components-list">
            <User setMobile={setMobile} setNickName={setNickName} />
            <Table rowKey={row => JSON.stringify(row)} dataSource={data.list} columns={columns} />
            <Modal bodyStyle={{paddingTop: 30}} className="user-list-modal" open={open} onCancel={setFalse}>
                <Form form={form} labelCol={{span: 4}}>
                    <InputFormItem name="id" hidden />
                    <InputFormItem name="name" label="名称" disabled />
                    <InputFormItem name="openId" label="openId" disabled />
                    <InputFormItem name="pid" label="推广位" />
                </Form>
            </Modal>
        </div>
    );
}
